<div id="container" style="width: 763px; height: 450px; margin: 0 auto"></div>
<script type="text/javascript">
			Highcharts.theme = {
			   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
			   chart: {
				  backgroundColor: {
					 linearGradient: [0, 0, 500, 500],
					 stops: [
						[0, 'rgb(239, 239, 239)']
					 ]
				  },
				  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
				  plotBorderWidth: 1,
				  spacingRight: 30
			   },
			   title: {
				  style: { 
					 color: '#000',
					 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
				  }
			   },
			   subtitle: {
				  style: { 
					 color: '#666666',
					 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
				  }
			   },
			   xAxis: {
				  
				  labels: {					 
					 style: {
						color: '#000',
						font: '11px Trebuchet MS, Verdana, sans-serif'
					 }
				  },
				  tickColor: '#333',
				  title: {
					 style: {
						color: '#333',
						fontWeight: 'bold',
						fontSize: '12px',
						fontFamily: 'Trebuchet MS, Verdana, sans-serif'
			
					 }            
				  }
			   },
			   yAxis: {
			      allowDecimals: false,
				  //minorTickInterval: 'auto',
				  lineColor: '#aaa',
				  lineWidth: 1,
				  tickWidth: 1,
				  tickColor: '#999',
				  labels: {
					 style: {
						color: '#000',
						font: '11px Trebuchet MS, Verdana, sans-serif'
					 }
				  },
				  title: {
					 style: {
						color: '#333',
						fontWeight: 'bold',
						fontSize: '12px',
						fontFamily: 'Trebuchet MS, Verdana, sans-serif'
					 }            
				  }
				   
			   },
			   legend: {
				  itemStyle: {         
					 font: '9pt Trebuchet MS, Verdana, sans-serif',
					 color: 'black'
			
				  },
				  itemHoverStyle: {
					 color: '#039'
				  },
				  itemHiddenStyle: {
					 color: 'gray'
				  }
			   },
			   labels: {
				  style: {
					 color: '#99b'
				  }
			   }
			};
			var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'areaspline',
                        marginBottom: 60,
						zoomType: 'x'
					},
					title: {
						text: '<?php echo $type;?>',
						style: {
								font: 'normal 18px arial, sans-serif',
								color:'#0a708c'
						}
					},
					 xAxis: {
						categories: <?php echo $date;?>,
						maxZoom: 5,
                        labels: {
                          //  step:  <?php  echo isset($step) ? $step : 1;?>,
							rotation: 0,
							align: 'center'
                        },
						tickPixelInterval:0,
						tickmarkPlacement: 'on',
						tickInterval: <?php  echo isset($step) ? $step : 1;?>,
						lineColor: '#333',
       					lineWidth: 1
						
					},
					yAxis: {
					    allowDecimals: false,
						title: {
							text: 'Số lượng',
							style: {
								font: 'bold 14px vernada, sans-serif',
								color:'#0a708c'
							}
						}
					},
					tooltip: {
						formatter: function() {
								var a=function addCommas(nStr)
									{
										nStr += '';
										x = nStr.split('.');
										x1 = x[0];
										x2 = x.length > 1 ? '.' + x[1] : '';
										var rgx = /(\d+)(\d{3})/;
										while (rgx.test(x1)) {
											x1 = x1.replace(rgx, '$1' + ',' + '$2');
										}
										return x1 + x2;
									}
				                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
						},
						style: {
							font: 'normal 12px vernada, sans-serif',
							color:'#000000'
						},
						
                        crosshairs: true
					},
					credits: {
						enabled: false
					},
					plotOptions: {
						areaspline: {
							fillOpacity: 0.2,
							lineWidth: 2,
							states: {
							   hover: {
								  lineWidth: 3
							   }
							},
							marker: {
							   enabled: true,
							   states: {
								  hover: {
									 enabled: true,
									 symbol: 'circle',
									 radius: 4,
									 lineWidth: 1
								  },
								  radius: 4
							   }   
							}
						 }
						
						
					},
					rangeSelector: {
						selected: 1,
						inputEnabled: false
					},
					
					navigator: {
						height: 30
					},
                    legend: {
						align: 'center',
						verticalAlign: 'bottom',
						y: 8,
						x:10,
						floating: false,
						borderWidth: 1,
						///backgroundColor: '#FFFFFF',
						backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
						
					},
					series: [<?php echo $data;?>,<?php echo isset($data1)? $data1: '';?>],
                    exporting: {
                        enabled: false
                    }
					
				});
				
				
				
				
				
				
				
				

				
			});
		</script>
